<link href="css/style_collections.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ddphpalbum.js"></script>
<script type="text/javascript" src="includes/getalbum.php?id=collectionalbum&page=3"></script>

<style type="text/css">
	.photoalbum{
		padding-left: 45px;
	}
	span.fadehover {
		position: absolute;
	}

	.fadehover:hover img{
	border: 1px solid navy;
	}
	img.a {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}
	ul.thumb {
		width: 450px;
		float: left;
		list-style: none;
		margin-left: 20px;
		margin-bottom: 15px;
		padding: 0px 10px 0px 10px;
		display:block;
	}
	ul.thumb li {
		padding: 5px;
		float: left;
		position: relative;  /* Set the absolute positioning base coordinate */
		width: 100px;
		height: 100px;
	}
	ul.thumb li span img {
		width: 100px; height: 100px; /* Set the small thumbnail size */
		-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
		/*border: 1px solid #ddd;*/
		padding: 5px;
		/*background: #f0f0f0;*/
		position: absolute;
		left: 0; top: 0;
	}
	ul.thumb li img.hover {
		background:center;  /* Image used as background on hover effect
	}
</style>

<script type="text/javascript">
	Ext.onReady(function(){
		images.content(3);
	});
</script>

<div id="content_and_footer">
	<div id="page_content">
		<div id="collections">
			<div id="collect_content">
            <script type="text/javascript">
            var album = new phpimagealbum({
                albumvar: collectionalbum, //ID of photo album to display (based on getpics.php?id=xxx)
                dimensions: [4,2],
				kind:'collections',
//                    sortby: ["file", "asc"], //["file" or "date", "asc" or "desc"]
                autodesc: "Photo %i", //Auto add a description beneath each picture? (use keyword %i for image position, %d for image date)
                showsourceorder: false, //Show source order of each picture? (helpful during set up stage)
                onphotoclick:function(thumbref, thumbindex, thumbfilename){
					var newImg = new Image();
				    newImg.src = collectionalbum.images[thumbindex][1];
				    var curHeight = collectionalbum.images[thumbindex][5];
				    var curWidth = collectionalbum.images[thumbindex][4];
				    var img = resize(curWidth,curHeight,fw,fh);
                    thumbnailviewer.loadimage(newImg.src,img[0],img[1],thumbindex, collectionalbum);
                }
            });
            </script>
			</div>
		</div>
		
		<div id="description">
		</div>
	</div>
	<div id="footer">
		Copyright © 2011 WHEEL HOUSE CAFE
	</div>
</div>
